import { Button, Icon } from "@wind/wind-ui";
import React from "react";
import { showNumberFormat } from "../../../utils/utils";
import { DATATYPE, IOption, STATUS } from "./types";
import useTable from "./useTable";

const x = 1000;
const y = 100;

var _data = (() => {
  let yItem = [];
  for (let yIndex = 0; yIndex < y; yIndex++) {
    let xItem = [];
    for (let xIndex = 0; xIndex < x; xIndex++) {
      xItem.push(Number(`${xIndex}${yIndex}`));
    }
    yItem.push(xItem);
  }
  return yItem;
})();

const service = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(_data);
    }, 1000);
  });
};

let initOption: IOption = {
  viewWidth: 600,
  viewHeight: 320,

  preRenderRatio: 1.6,

  itemWidth: 80, // 单个元素的高
  itemHeight: 30, // 单个元素的宽

  header: _data[0].map((item, index) => ({
    data: `-${item}-`,
    children: [{ data: `${item}` }]
  })), // 表头
  fixed: 2,
  transposition: false //是否转置
};

export default function Index() {
  const p = useTable({ service, option: initOption });
  const {
    data,
    containerProps,
    wrapperProps,
    transposition,
    itemHandle,
    onContextMenu,
    rightMenuProps,
    tableProps,
    offset
  } = p;

  console.log(
    "%c 🥤 p: ",
    "font-size:20px;background-color: #4b4b4b;color:#fff;",
    p
  );

  let header = data.header;

  let style = {
    width: containerProps.style.width,
    height: containerProps.style.height
  };

  return (
    <div className="edb-table-index" style={offset}>
      {/* <TTable/> */}
      <Button onClick={p.run}>提取数据</Button>

      {/* <div style={{ width: "800px"}}> */}
      <div className="et-header" style={{ width: style.width }}>
        {header.map((item, i) => {
          let style = {
            width: header[i]?.width
          };

          return (
            <div
              key={header?.[i]?.index}
              style={style}
              onClick={itemHandle?.onHeaderClick}
              data-position={`${item?.index}`}
              className={
                " text-align-" +
                (item.dataAlign || "center") +
                (item.fixed ? "  header-fixed" : "")
              }
            >
              <div>
                {item.data}
                {item.sortType && (
                  <Icon
                    type={item.sortType === "asc" ? "arrow-up" : "arrow-down"}
                  />
                )}
              </div>
              {item.children?.map?.(child => (
                <div>{child.data}</div>
              ))}
              <div></div>
            </div>
          );
        })}
        {/* </div> */}
      </div>
      <div style={style}>
        <div {...containerProps} onContextMenu={onContextMenu}>
          <div {...wrapperProps}>
            <Table {...data} itemHandle={itemHandle} tableProps={tableProps} />
          </div>
        </div>
      </div>

      <RightMenu {...rightMenuProps} />
    </div>
  );
}

Index.propTypes = {};
Index.defaultProps = {};

const RightMenu = ({ menus, show, position, onMouseLeave }) => {
  if (!show) {
    return <></>;
  } else {
    return (
      <div
        className="rightMenu"
        style={{
          position: "absolute",
          ...position
        }}
        onMouseLeave={onMouseLeave}
      >
        {menus.map(({ label, func, disabled }) => (
          <Button onClick={func} disabled={disabled}>
            {label}
          </Button>
        ))}
      </div>
    );
  }
};

const Table = ({ viewData, header, viewInfo, itemHandle, tableProps }) => {
  return (
    <div className="et" style={tableProps}>
      {viewData.map((ele, i) => (
        <div
          key={ele[0].y}
          className={"et-row" + ((ele[0].y & 1) === 0 ? " et-even" : " et-odd")}
        >
          {ele.map((item, i2) => {
            let style = { width: header[i2]?.width };

            return (
              <div
                key={`${item?.x},${item?.y}`}
                style={style}
                onClick={itemHandle?.onSelect}
                onDoubleClick={itemHandle?.onDoubleClick}
                data-position={`${item?.x},${item?.y}`}
                className={
                  (i2 < initOption.fixed ? " fixed " : "") +
                  "itemStatus itemStatus-" +
                  (item?.status || "default") +
                  " text-align-" +
                  (header[item.x]?.dataAlign || "center")
                }
              >
                <TableCell
                  item={item}
                  headerInfo={header[item.x]}
                  itemHandle={itemHandle}
                />
              </div>
            );
          })}
        </div>
      ))}
    </div>
  );
};

const TableCell = ({ item, itemHandle, headerInfo }) => {
  const renderItem = () => {
    switch (headerInfo?.dataType?.type) {
      case DATATYPE.time:
        return new Date(item.data)?.format(
          item.dataType?.param ?? "yyyy-MM-dd"
        );
      case DATATYPE.number:
        return showNumberFormat(item.data, item.dataType?.param ?? 2);

      case DATATYPE.string:
      default:
        return item.data;
    }
  };

  return (
    <>
      {item.status === STATUS.editor ? (
        <input
          onClick={e => e.stopPropagation()}
          onBlur={itemHandle?.setItemValue}
          defaultValue={item.data}
          data-position={`${item.x},${item.y}`}
        />
      ) : (
        renderItem()
      )}
    </>
  );
};
